// 懒加载--滚动条到达页面某个位置时，需要重新加载

// 思路：
// 1.页面加载时，需要发送请求，获得第一页的数据,并将数据展示到页面
// 2.滚动条快滚动到底部时，重新发起请求，获取新的数据，并再次将数据渲染到页面


// 获取元素
let uls = document.querySelector('.goods')
// 声明一个字符串，用于添加元素内容
let str = ""

let p = document.createElement('p')

// 实现步骤
// 1.声明一个获取数据，并将数据渲染到页面的函数
// data：获取的数据，el：dom元素
function render(data, el) {
    data.forEach(item => {
        //  一步到位取到图片地址
        let regExp = /(?<=imgurl=)[^'"]*/
        let result = item.productImg2.match(regExp)
         str+= `
        <li productid=${item.productId}>
        <a href="#">
            <div class="img"><img src=${result[0]} alt="" width=100></div>
            <div class="title">
                <h4>${item.productName}</h4>
                <div>
                    <span>${item.productFrom}|${item.productTime}</span>
                    <i>
                        <img src="./images/评论.png" alt="">
                    </i>
                    <span>${item.productComCount}</span>
                </div>
            </div>
        </a>
    </li>`
    })
    uls.innerHTML=str
}

// 首次发起请求
function getData(pageid = 0) {
    fetch(`http://chst.vip:1234/api/getmoneyctrl?pageid=${pageid}`)
        .then(body => body.json())
        .then(res => {
            // console.log(res)
            render(res.result, uls)

        })
        
}
getData()

// 声明一个pageid，用于记录数据的条数
let pageid = 1;
// 调用我们封装好的懒加载函数
lazyLoad(function () {
    // 发送一次请求,即懒加载一次
    pageid++
    // pageid最多到14，大于14，则加载不出新数据了
    getData(pageid)
    if (pageid > 14) {
        alert('我也是有底线的')
        return
    }    
}, 100)

$('.goods').on('click', 'li', function () {
    console.log($(this))
    let productid = $(this).attr('productid')
    console.log(productid)
    location.href = `../pages/productDetails.html?productid=${productid}`
})

// 返回顶部
let toTop = $('.gotop').get(0)
// console.log(toTop)

toTop.onclick = function (e) {
  console.log(123)
  document.documentElement.scrollTop = 0;
}